<template>
  <!-- 首充 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="首充" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="95px">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <!-- 活动商品 -->
            <div v-show="item.key=='goods'">
              <div class="flexWrap padding10" v-for="(second,two) in recharge_info" :key="two">
                <el-form-item label="首充商品:" class="marginR10">
                  <el-select v-model="second.goods_id" placeholder="请选择首充商品">
                    <el-option v-show="!third.goods_keys && third.activity_type==7 && third.goods_type==1" :label="'【'+third.value+'】'+third.label" :value="third.value" v-for="(third, three) in goodsData" :key="three"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="最大可领取次数:" label-width="120px">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="second.can_receive_count" controls-position="right" clearable placeholder="请输入最大可领取次数"/>
                </el-form-item>
                <el-form-item label="描述:" class="marginT10">
                  <el-input type="text" v-model="second.des" clearable placeholder="请输入描述"></el-input>
                </el-form-item>
                <el-form-item label="备注:" class="marginT10">
                  <el-input type="text" v-model="second.param" clearable placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-button class="marginL10" v-permission="'mail.add'" type="primary" size="mini" icon="el-icon-plus" @click="isShowDetails = true" style="margin-top:12px">新增商品</el-button>
              </div>
            </div>
            <el-form-item class="item-clear" v-show="item.key=='day'" label="" prop="day" label-width="0">
              <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.day" controls-position="right" clearable placeholder="请输入领取奖励天数"/>
            </el-form-item>
            <!-- 奖励 -->
            <div v-show="item.key=='reward'" class="flex" style="height:auto;">
              <div class="title" style="height:auto;">
                <div class="flex" v-for="(second,two) in propItemData" :key="two">
                  <div class="btn-box-add" style="margin-top:0;">
                    <el-tooltip content="新增道具配置" v-show="itemIndex==two">
                      <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addReward()" />
                    </el-tooltip>
                  </div>
                  <el-form-item class="item-clear" label="奖励:" label-width="50px">
                    <el-select class="width180" v-model="second.itemType" placeholder="请选择道具类型" filterable >
                      <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="item-clear" label="数值:" label-width="50px">
                    <el-input-number class="width180 marginR5" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="second.num" controls-position="right" clearable placeholder="请输入道具奖励数值"/>
                  </el-form-item>
                  <div class="btn-box-delete" label-width="60px">
                    <el-tooltip content="删除道具配置" v-show="propItemData.length != 1">
                      <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteReward(two)" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <!-- 保障金 -->
            <div v-show="item.key=='security_deposit'" class="flex" style="height:50px">
              <el-form-item label="低于筹码:" label-width="80px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="securityData.condition" controls-position="right" clearable placeholder="请输入低于筹码数" style="width: 140px;" />
              </el-form-item>
              <el-form-item label="选择道具:" label-width="80px">
                <el-select v-model="securityData.itemType" placeholder="请选择道具类型" filterable style="width:120px">
                  <el-option :label="second.label" :value="second.value" v-for="(second, two) in propDataArray" :key="two"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量:" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="securityData.num" controls-position="right" clearable placeholder="请输入道具数量" style="width: 140px;" />
              </el-form-item>
              <el-form-item label="次数:" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="securityData.time" controls-position="right" clearable placeholder="请输入领取次数" style="width: 120px;" />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
    <goods-details :show="isShowDetails" :data="{}" @onHideDetails="onHideDetails" :goodsTypeData="GOODS_TYPE" />
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";
import {
  GOODS_TYPE
} from "@/utils/enum";
import PageDetails from '../page-details.vue'
import GoodsDetails from '@/views/activityManage/commodity/page-details'
export default {
  components: {
    PageDetails,
    GoodsDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    goodsData: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.goodDataArray
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.propDataArray
      }
    },
  },
  data () {
    return {
      GOODS_TYPE,
      isShow: false,
      isShowDetails: false,
      itemData: [
        { label: '活动商品', key: 'goods' },
        { label: '领取天数', key: 'day' },
        { label: '奖励', key: 'reward' },
        { label: '保障金', key: 'security_deposit' }
      ],
      rewardData: {
        itemType: 1,
        num: 1,
      },
      securityData: {
        condition: '',
        itemType: 1,
        num: 1,
        time: ''
      },
      rewardIndex: 0,
      recharge_info: [{
        sub_id: '', // 唯一表示 在一条数据中唯一
        des: '', // 描述
        param: '', // 参数
        good_id: '', // 商品id
        can_receive_count: '' // 最大可领取次数
      }],
      propItemData:[{itemType:1,num:0}],
      itemIndex:0,
      formParams: {
        day:0
      },
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        let params = that.formParams;
        if(params.recharge_info){
          that.recharge_info=params.recharge_info
        }
        that.formParams.day=JSON.parse(params.other).day
        // 奖励
        if(JSON.parse(params.other).reward){
          that.propItemData = params.reward
          that.itemIndex = params.reward.length-1
        }
        // 保障金
        if(params.safeguard &&params.safeguard.length){
          that.securityData = params.safeguard[0]
        }
      } else {
        that.chooseLangDataList = []
        that.propItemData=[{itemType:1,num:0}]
        that.itemIndex=0
        that.recharge_info =[{
          sub_id: 0,
          des: '',
          param: '',
          good_id: '',
          can_receive_count: ''
        }]
        that.formParams={
          day:0
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this,params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm())),
      safeguard=that.$public.activeNumberByWan([that.securityData]);
      params.other = {}
      params.activity_type = 7
      // 奖励
      params.other.reward = that.arrNumWan(JSON.parse(JSON.stringify(that.propItemData)))
      // 保障金
      params.other.safeguard = safeguard[0]
      params.other.day = that.formParams.day
      params.other = JSON.stringify(params.other)
      // 首充商品
      that.recharge_info.map((item, index) => {
        item.sub_id = index
      })
      params.recharge_info = that.recharge_info
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (params.id) {
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            addActivity(params).then((res) => {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增道具
    addReward () {
      this.itemIndex++
      this.propItemData.push({
        itemType:1,num:0
      })
    },
    // 删除道具
    deleteReward (index) {
      this.itemIndex--
      this.propItemData.splice(index, 1,)
    },
    // 道具*10000
    arrNumWan(arr){
      arr.forEach(item=>{
        item.num=item.num*10000
      })
      return arr
    },
    onHideDetails () {
      this.isShowDetails = false
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}
.box-title {
  font-size: 17px;
  font-weight: 600;
}
.prooItem {
  margin: 5px;
  font-size: 16px;
  font-weight: 600;
  p {
    height: 24px;
  }
}
.btn-box-add{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
